<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>约泡浪呀榜</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="apple-mobile-web-app-title" content="一道走">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="stylesheet" href="src/css/s.min.css">
	<script>
		(function(){
			var phoneWidth =  parseInt(window.screen.width);
			var phoneScale = phoneWidth/640;
			var isAndroid = RegExp("Android").test(navigator.userAgent);
			if (isAndroid) {
				document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
			} else {
				document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
			}
		}());
	</script>
</head>

<body class="app" style="width: 100%;height: 100%;background: #FFFFFF;">

<div class="container" style="width: 640px;margin: 0 auto;">

	<div class="swiper-container swiper-bg">
		<div class="swiper-wrapper">
			<div class="swiper-slide p1">
				<!-- 框子 -->
				<div class="cloud-back"></div>
				<div class="box"></div>
				<div class="icon-loading">
					<div class="hot"></div>
					<div class="cannikin"></div>
				</div>
				<div class="loading-num">
					<p class="num">0%</p>
					<p class="tit">LOADING</p>
				</div>
				<!-- 文字 -->
				<div class="w-1">
					<div class="w-1-1"></div>
					<div class="w-1-2"></div>
					<div class="w-1-3"></div>
					<div class="w-1-4"></div>
					<div class="w-1-5"></div>
					<div class="w-1-6"></div>
					<div class="w-1-7"></div>
				</div>
				<div class="w-2">
					<div class="w-2-1"></div>
					<div class="w-2-2"></div>
					<div class="w-2-3"></div>
					<div class="w-2-4"></div>
					<div class="w-2-5"></div>
					<div class="w-2-6"></div>
					<div class="w-2-7"></div>
				</div>
				<div class="w-3">
					<div class="w-3-1"></div>
					<div class="w-3-2"></div>
					<div class="w-3-3"></div>
					<div class="w-3-4"></div>
					<div class="w-3-5"></div>
					<div class="w-3-6"></div>
					<div class="w-3-7"></div>
				</div>
				<div class="w-4">
					<div class="w-4-1"></div>
					<div class="w-4-2"></div>
					<div class="w-4-3"></div>
					<div class="w-4-4"></div>
					<div class="w-4-5"></div>
					<div class="w-4-6"></div>
					<div class="w-4-7"></div>
				</div>
			</div>
			<div class="swiper-slide p2">
				<div class="cloud-back"></div>
				<div class="cloud-front"></div>
				<div class="man"></div>
				<div class="box"></div>
				<div class="w-right"></div>
				<div class="w-left"></div>
			</div>
			<div class="swiper-slide p3">
				<div class="cloud-back"></div>
				<div class="cloud-front"></div>
				<div class="man"></div>
				<div class="box"></div>
				<div class="w-right"></div>
				<div class="w-left"></div>
			</div>
			<div class="swiper-slide p4">
				<div class="cloud-back"></div>
				<div class="cloud-front"></div>
				<div class="man"></div>
				<div class="box"></div>
				<div class="w-right"></div>
				<div class="w-left"></div>
			</div>
			<div class="swiper-slide p5">
				<div class="cloud-back"></div>
				<div class="title"></div>
				<div class="w-right"></div>
				<div class="w-left"></div>
				<ul class="entry-list">
					<li><a class="A" href="javascript:void(0)"></a></li>
					<li><a class="B" href="javascript:void(0)"></a></li>
					<li><a class="C" href="javascript:void(0)"></a></li>
				</ul>
			</div>
			<div class="swiper-slide p6">
				<div class="cloud-back"></div>
				<div class="logo"></div>
				<div id="w-A" class="w-right"></div>
				<ul class="lists">
					<li><a id="F" href="javascript:void(0)"></a></li>
					<li><a id="E" href="javascript:void(0)"></a></li>
					<li><a id="D" href="javascript:void(0)"></a></li>
				</ul>
			</div>
			<div class="swiper-slide p7">
				<div class="cloud-back"></div>
				<div class="logo"></div>
				<div id="w-D" class="w-right"></div>
				<ul class="lastLists">
					<li><a id="Z" href="javascript:void(0)"></a></li>
					<li><a id="Y" href="javascript:void(0)"></a></li>
					<li><a id="X" href="javascript:void(0)"></a></li>
				</ul>
			</div>
			<div class="swiper-slide p8">
				<div class="cloud-back"></div>
				<div class="theme theme-AX"></div>
				<a href="javascript:void(0)" class="act-link"></a>
				<a href="javascript:void(0)" class="share-link"></a>
				<a href="http://m.yidaozou.com/html/one-day-escape/calendar-price.html" class="pao-link"></a>
				<a href="http://m.yidaozou.com/html/langyabang/ranks.html" class="all-link"></a>
				<div class="bottom"></div>
			</div>
		</div>

		<a href="javascript:void(0);" class="u-globalAudio z-pause">
			<i class="icon-music"></i>
			<audio src="http://m.yidaozou.com/html/langyabang/src/img/slide/BGM.mp3" autoplay="autoplay" loop="loop"></audio>
			<span class="">开启</span>
		</a>
		<!-- If we need navigation buttons -->
		<div class="swiper-button-prev hide"></div>
		<div class="swiper-button-next swipeMove"></div>

		<!-- If we need scrollbar -->
		<div class="swiper-scrollbar"></div>

	</div>
</div>

<div class="share-wrapper hide"><i></i></div>

<div class="rule-wrapper hide">
	<i class="close-btn"></i>
</div>

<script src="src/js/zepto.min.js"></script>
<script src="src/js/swiper.jquery.min.js"></script>
<script>
	Zepto(function($){

		var firstAnswer = 'A';
		var secondAnswer = 'D';
		var thirdAnswer = 'X';

		var isWeixin = function() {
			var ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				return true;
			} else {
				return false;
			}
		};

		if (isWeixin()) {
			var script = document.createElement("script");
			script.src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js";
			script.onload = function () {
				var wxScript = document.createElement("script");
				wxScript.src = "http://m.yidaozou.com/html/langyabang/src/js/weixin.js";
				wxScript.onload = function () {
					new Weixin().init({})
				};
				document.head.appendChild(wxScript)
			};
			document.head.appendChild(script)
		}

		var productIds = {
			'AX': 1774,
			'BX': 1770,
			'CX': 1783,
			'AY': 1643,
			'BY': 1646,
			'CY': 1647,
			'AZ': 1790,
			'BZ': 1744,
			'CZ': 1925
		};

		var ranksMap = {
			'AX': 3,
			'BX': 7,
			'CX': 8,
			'AY': 6,
			'BY': 1,
			'CY': 5,
			'AZ': 4,
			'BZ': 9,
			'CZ': 2
		};

		$(".swiper-wrapper").css("height",$(window).height());

		var swiper = new Swiper('.swiper-container', {
			onSlideChangeStart:function(obj){
				// 从零开始
				if (obj.activeIndex !== 6) {
					$('.swiper-container').removeClass('swiper-bg-' + obj.previousIndex)
					$('.swiper-container').addClass('swiper-bg-' + obj.activeIndex)
				}

				$('.swiper-button-next').show()
				obj.unlockSwipeToNext()

//				$('.z-show').text(obj.activeIndex)
				if (obj.activeIndex !== 7) {

					if(isWeixin()) {
						new Weixin().init({
							title: "约泡浪呀榜x",
							desc: "一卷温馨浪呀榜  囊尽华夏奇妙汤。",
							link: 'http://m.yidaozou.com/html/langyabang/jump.html'
						})
					}
				}

				if(obj.activeIndex === 4 || obj.activeIndex === 5 || obj.activeIndex === 6 || obj.activeIndex === 7) {
					$('.swiper-button-next').hide()
					obj.lockSwipeToNext()
				}

			},
			onInit: function(o) {
				if (o.activeIndex === 0) {
					$('.swiper-button-next').hide()
					o.lockSwipeToNext()
				}

				//图片预加载
				var loadingPage = (function (sourceArr) {
					for (var i = 0; i < sourceArr.length; i++) {
						sourceArr[i] = (sourceArr[i]);
					}
					var loadImage = function (path, callback) {
						var img = new Image();
						img.onload = function () {
							img.onload = null;
							callback(path);
						}
						img.src = path;
					}
					var imgLoader = function (imgs, callback) {
						var len = imgs.length, i = 0;
						if (len == 0) {
							$('.swiper-button-next').show()
							swiper.unlockSwipeToNext()
						}
						while (imgs.length) {
							loadImage(imgs.shift(), function (path) {
								callback(path, ++i, len);
							});
						}
					}

					imgLoader(sourceArr, function (path, curNum, total) {
						var percent = curNum / total;
						$('.num').text(Math.floor(percent * 100) + '%')
						if (percent == 1) {
							$('.swiper-button-next').show()
							swiper.unlockSwipeToNext()
							$('.icon-loading').hide()
							$('.loading-num').hide()
//							$('.u-globalAudio').show();
						}
					});
				});

				var rootUrl = 'http://m.yidaozou.com/html/langyabang/'
				loadingPage([
					rootUrl + 'src/img/slide/rule@640x1008.png',
					rootUrl + 'src/img/slide/share@516x348.png',
					rootUrl + 'src/img/slide/p2/box@368x487.png',
					rootUrl + 'src/img/slide/p2/man@591x459.png',
					rootUrl + 'src/img/slide/p2/w_right@225x412.png',
					rootUrl + 'src/img/slide/p2/w_left@59x287.png',
					rootUrl + 'src/img/slide/p3/box@279x653.png',
					rootUrl + 'src/img/slide/p3/man@640x469.png',
					rootUrl + 'src/img/slide/p3/w_left@26x480.png',
					rootUrl + 'src/img/slide/p3/w_right@127x429.png',
					rootUrl + 'src/img/slide/p4/box@369x533.png',
					rootUrl + 'src/img/slide/p4/man@626x493.png',
					rootUrl + 'src/img/slide/p4/w_right@176x382.png',
					rootUrl + 'src/img/slide/p4/w_left@60x420.png',
					rootUrl + 'src/img/slide/p5/icon_title@154x367.png',
					rootUrl + 'src/img/slide/p5/w_left@117x197.png',
					rootUrl + 'src/img/slide/p5/w_right@191x226.png',
					rootUrl + 'src/img/slide/p5/button1@136x223.png',
					rootUrl + 'src/img/slide/p5/button2@136x209.png',
					rootUrl + 'src/img/slide/p5/button3@136x214.png',
					rootUrl + 'src/img/slide/p6/A_show@141x477.png',
					rootUrl + 'src/img/slide/p6/answer1@136x390.png',
					rootUrl + 'src/img/slide/p6/answer2@136x391.png',
					rootUrl + 'src/img/slide/p6/answer3@136x391.png',
					rootUrl + 'src/img/slide/p6/B_show@116x442.png',
					rootUrl + 'src/img/slide/p6/C_show@94x476.png',
					rootUrl + 'src/img/slide/p6/D_show@91x352.png',
					rootUrl + 'src/img/slide/p6/D@136x391.png',
					rootUrl + 'src/img/slide/p6/E@136x391.png',
					rootUrl + 'src/img/slide/p6/F@136x390.png',
					rootUrl + 'src/img/slide/p6/G@136x391.png',
					rootUrl + 'src/img/slide/p6/H@136x391.png',
					rootUrl + 'src/img/slide/p6/I@136x390.png',
					rootUrl + 'src/img/slide/p6/L@136x391.png',
					rootUrl + 'src/img/slide/p6/logo@96x220.png',
					rootUrl + 'src/img/slide/p6/M@136x391.png',
					rootUrl + 'src/img/slide/p6/N@136x390.png',
					rootUrl + 'src/img/slide/p6/X@136x391.png',
					rootUrl + 'src/img/slide/p6/Y@136x391.png',
					rootUrl + 'src/img/slide/p6/Z@136x390.png',
					rootUrl + 'src/img/slide/p7/act_link@25x128.png',
					rootUrl + 'src/img/slide/p7/share_link@25x128.png',
					rootUrl + 'src/img/slide/p7/all_link@134x250.png',
					rootUrl + 'src/img/slide/p7/pao_link@138x249.png',
					rootUrl + 'src/img/slide/p7/place_AX@620x543.png',
					rootUrl + 'src/img/slide/p7/place_AY@630x567.png',
					rootUrl + 'src/img/slide/p7/place_AZ@539x588.png',
					rootUrl + 'src/img/slide/p7/place_BX@600x578.png',
					rootUrl + 'src/img/slide/p7/place_BY@620x647.png',
					rootUrl + 'src/img/slide/p7/place_BZ@640x577.png',
					rootUrl + 'src/img/slide/p7/place_CX@640x596.png',
					rootUrl + 'src/img/slide/p7/place_CY@637x617.png',
					rootUrl + 'src/img/slide/p7/place_CZ@620x588.png'
				])

			},
			followFinger: false,
			speed: 500,
//			hashnav: true,
//			longSwipes: false,
			touchMoveStopPropagation: false,
			// Navigation arrows
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',

			// And if we need scrollbar
			scrollbar: '.swiper-scrollbar'
		});

		var placeNameMap = {
			'1': '天目湖御水温泉',
			'2': '清远森波拉温泉',
			'3': '北京九华山庄温泉',
			'4': '新丰云天海温泉',
			'5': '天目湖涵田半山温泉',
			'6': '苏州天颐温泉',
			'7': '北京热带雨林风情园温泉',
			'8': '天津天鹅湖温泉',
			'9': '广州香江健康山谷'
		};

		// 第一题目
		$('.entry-list li a').click(function() {
			var answer = $(this).attr('class')
			$('.swiper-button-next').show()
			swiper.unlockSwipeToNext()
			// 渲染5元素后展示
			$('.p6 .w-right').attr('id', 'w-' + answer)
			firstAnswer = answer;
			var arr = []
			// 父母
			if (answer === 'A') {
				arr = ['F', 'E', 'D']
				// 情侣
			} else if (answer === 'B') {
				arr = ['I', 'H', 'G']
			} else {
				// 好基友
				arr = ['N', 'M', 'L']
			}
			$('.lists a').each(function(index, item) {
				$(item).attr('id', arr[index])
			})
			swiper.slideTo(5)
		})

		// 第二题目
		$('.lists li a').click(function() {
			var id = $(this).attr('id')
			$('.swiper-button-next').show()
			// 渲染6元素后展示
			secondAnswer = id
			// 第三道题解答也在这个页面上
			swiper.unlockSwipeToNext()
			swiper.slideTo(6)
		})

		// 第三题目
		var nickName = localStorage.getItem('ydz_langyabang_nickname') || '';
		$('.lastLists li a').click(function() {
			var id = $(this).attr('id')
			$('.swiper-button-next').show()
			// 渲染7元素后展示
			thirdAnswer = id
			// 第三道题解答也在这个页面上
			swiper.unlockSwipeToNext()

			var answer = firstAnswer + thirdAnswer

			$('.p8 .theme').addClass('theme-' + answer)

			// x->北京，y->江浙沪，z->广州
			var rank = ranksMap[answer];
			$('.pao-link').attr('href', $('.pao-link').attr('href') + '?group_id=' + productIds[answer])

			$('.all-link').attr('href', $('.all-link').attr('href') + '?rank=' + rank)

			if(isWeixin()) {
				new Weixin().init({
					desc: nickName + "的最佳约泡地是" + placeNameMap[rank] + "，位列浪呀榜第" + rank,
					link: 'http://m.yidaozou.com/html/langyabang/myRanks.html?rank=' + rank
				});
			}
			swiper.slideTo(7)

		})

		$('.share-link').click(function() {
			if(isWeixin()) {
				$('.share-wrapper').removeClass('hide')
			}
		})

		$('.share-wrapper').click(function() {
			$(this).addClass('hide')
		})

		$('.act-link').click(function() {
			$('.rule-wrapper').removeClass('hide')
		})

		$('.close-btn').click(function() {
			$(this).parent().addClass('hide')
		})


		// 音乐播放
//		var audioElem = document.getElementById('J_audio')
//		if (audioElem.autoplay) {
//			setTimeout(function() {
//				audioElem.play();
//			}, 2000)
//		}

		var GlobalAudio = function($item) {
			//定义属性
			this._$globalAudio = $item; //容器对象
			this._$tip = $('<span></span>'); //文本提示容器
			this.audio = this._$globalAudio.find('audio')[0]; //获取音频控件
			this.isAllowManually = true; //是否允许手动操作
			this.playState = 'ready'; //当前播放状态

			//定义临时变量
			var theClass = this;

			//添加文本提示容器
			this._$globalAudio.append(this._$tip);

			// 音符飘逸

			//加载完成时自动播放
			if (this.audio.autoplay) {
				// this.audio.pause();
				setTimeout(function() {
					theClass.play();
				}, 2000);
			}

			//加载完成后才允许手动控制播放
			theClass.isAllowManually = true;
			//播放控制
			this._$globalAudio.on('click', function(e) {
				e.preventDefault();
				if (theClass.isAllowManually) {
					theClass._$globalAudio.is('.z-play') ? theClass.pause() : theClass.play();
				}
			});

			//修复ios/android 4.4下音频不播放的问题
			$(document).one('touchstart', function(e) {
				theClass.audio.play();
			});
		};

		//播放
		GlobalAudio.prototype.play = function() {
			if (!this._$globalAudio.is('.z-play')) {

				this.audio.play();
				this._$globalAudio.removeClass('z-pause').addClass('z-play');
				this._showTip('开启');
				this.playState = 'playing';
			}
		};

		//暂停
		GlobalAudio.prototype.pause = function() {
			if (!this._$globalAudio.is('.z-pause')) {
				this.audio.pause();
				this._$globalAudio.removeClass('z-play').addClass('z-pause');
				this._showTip('关闭');
				this.playState = 'pause';
			}
		};

		//显示提示
		GlobalAudio.prototype._showTip = function(msg) {
			var theClass = this;
			this._$tip.text(msg);
			this._$tip.addClass('z-show');
			setTimeout(function() {
				theClass._$tip.removeClass('z-show');
			}, 1000);
		};

		//获取全局音频容器
		var $globalAudio = $('.u-globalAudio');
		var globalAudio = new GlobalAudio($('.u-globalAudio'));

	})
</script>

</body>

</html>
